'use client'
import React from 'react'
import { Card, Button, Form, Input } from 'antd';
import { LockOutlined, UserOutlined } from '@ant-design/icons';
import './glo.css'
import { useRouter } from 'next/navigation'
export default function page() {
  const router = useRouter()
  const onFinish = (values: any) => {
    console.log('Received values of form: ', values);
    localStorage.setItem('token', values.username)
    router.push('/[locale]')
  };
  return (
    <Card title={<>
      <p style={{ margin: "0 auto", textAlign: 'center' }} ><img src="/tupian.png" alt="" style={{ width: '100px' }} /></p>
      <p style={{ margin: '0 auto', fontSize: '40px', color: 'rgb(0, 121, 254)' }} >客户关系管理系统</p>
      <p style={{ margin: '0 auto', color: 'rgb(0, 121, 254)' }}>Customer Relationship Management</p>
    </>} style={{ width: 450, height: 450, margin: '0 auto', marginTop: '150px', padding: '30px',textAlign:'center' }}>
      <Form
        onFinish={onFinish}
      >
        <Form.Item
          name="username"
          rules={[{ required: true, message: '用户名称不能为空!' }]}
        >
          <Input prefix={<UserOutlined />} placeholder="请输入用户名称！" />
        </Form.Item>
        <Form.Item
          name="password"
          rules={[{ required: true, message: '登录密码不能为空!' }]}
        >
          <Input prefix={<LockOutlined />} type="password" placeholder="请输入登录密码！" />
        </Form.Item>

        <Form.Item>
          <Button block type="primary" htmlType="submit">
            登录
          </Button>
        </Form.Item>
      </Form>
    </Card>
  )
}
